<template>
  <div class="app">
    <Header></Header>
    <!-- 搜索 -->
    <div class="box">
      <div style="margin-top: 15px; width: 100%">
        <el-input
          placeholder="搜索职位、公司"
          v-model="query.title"
          class="input-with-select"
        >
          <el-select
            v-model="query.postCity"
            slot="prepend"
            placeholder="请选择"
            style="width: 150px"
            clearable
          >
            <el-option
              v-for="item in city"
              :key="item.key"
              :label="item.city"
              :value="item.key"
            >
            </el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            style="width: 100px; color: #0a6ccf; background-color: #daecfe"
            @click="getData()"
          ></el-button>
        </el-input>
      </div>
    </div>
    <!-- 筛选 -->
    <!-- 列表 -->
    <el-divider></el-divider>
    <div class="list" v-for="item in list" :key="item.companyId">
      <el-col :span="24">
        <router-link
          :to="{ path: '/SearchDetail', query: { companyId: item.companyId } }"
        >
          <div class="list_card">
            <el-col :span="14">
              <div class="card_left">
                <div class="left_top">
                  <a style="color: #55cbc4; font-size: 17px" class="job_name">{{
                    item.postName
                  }}</a>
                  <a style="color: #55cbc4; padding-left: 10px; font-size: 17px"
                    >[{{ item.postCity }}]</a
                  >
                  <a style="padding-left: 10px; color: gray; font-size: 14px"
                    >发布于{{ item.postReleaseTime }}</a
                  >
                </div>
                <div class="left_middle">
                  <a
                    style="color: #fc703e; font-size: 16px; margin-right: 15px"
                    >{{ item.postSalary }}</a
                  ><a
                    style="font-size: 16px; color: #61687c; margin-right: 15px"
                    >{{ item.postEducation }}</a
                  ><a style="font-size: 16px; color: #61687c">{{
                    item.postCategory
                  }}</a>
                </div>
                <div style="font-size: 14px; color: gray">
                  <a>{{ item.postKeywords }}</a>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card_middle">
                <div style="margin-bottom: 10px">
                  <a style="color: #55cbc4; font-size: 17px">{{
                    item.companyName
                  }}</a>
                </div>
                <div>
                  <a style="font-size: 14px; color: #61687c"
                    >{{ item.companyNature }} | {{ item.postNumber }}</a
                  >
                </div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="card_right">
                <!-- <img
                  :src="item.companyImg"
                  alt=""
                  style="width: 50px; height: 50px; border-radius: 15px"
                /> -->
              </div>
            </el-col>
          </div>
        </router-link>
        <div style="width: 100%; height: 20px"></div>
      </el-col>

      <el-col :span="24">
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-col>
      <div class="banner"><img :src="Src1" alt="" class="banner_img1" /></div>
      <div><img :src="Src3" alt="" class="banner_img2" /></div>
      <div><img :src="Src2" alt="" class="banner_img3" /></div>
    </div>
    <Footer style="margin: 0"></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: 'SearchInfo',
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      query: {
        title: '',
        postCity: '',
        pageIndex: 1,
        pageSize: 5,
      },
      // 地区
      city: [
        {
          key: '南昌市',
          city: '南昌市',
        },
        {
          key: '九江市',
          city: '九江市',
        },
        {
          key: '上饶市',
          city: '上饶市',
        },
        {
          key: '景德镇',
          city: '景德镇',
        },
        {
          key: '北京市',
          city: '北京市',
        },
        {
          key: '上海市',
          city: '上海市',
        },
        {
          key: '深圳市',
          city: '深圳市',
        },
      ],
      // 搜索数据列表
      list: [],
      total: 0,
      Src1: 'https://static.zhipin.com/zhipin-geek/v434/web/geek/images/pro-3.jpg',
      Src2: require('../assets/pro-22.png'),
      Src3: require('../assets/pro-11.png'),
    }
  },
  methods: {
    getData() {
      var that = this
      that.$http.post('company/page', that.query).then(function (res) {
        if (res.data.code == 200) {
          that.list = res.data.data
          that.total = res.data.count
        } else {
          return that.$message.error('获取失败！')
        }
      })
    },
    handleSizeChange(val) {
      // var that = this
      // that.query.pageSize = val
      // that.$http.post('company/page', that.query).then(function (res) {
      //   if (res.data.code == 200) {
      //     that.list = res.data.data
      //     that.total = res.data.total
      //   } else {
      //     return that.$message.error('注册失败！')
      //   }
      // })
    },
    handleCurrentChange(val) {
      var that = this
      that.query.pageIndex = val
      that.$http.post('company/page', that.query).then(function (res) {
        if (res.data.code == 200) {
          that.list = res.data.data
          that.total = res.data.count
        } else {
          return that.$message.error('查询失败！')
        }
      })
    },
  },
  created() {
    this.query.title = this.$route.query.inputValue
    this.query.postCity = this.$route.query.address
    this.getData()
  },
}
</script>

<style lang="less" scoped>
.box {
  margin: 0 auto;
  padding-top: 40px;
  height: 80px;
  width: 100%;
}
.fliter {
  width: 100%;
}
.input-with-select {
  width: 70%;
  margin-left: 200px;
}
.list {
  width: 100%;
  height: 80%;
}
.list_card {
  margin-top: 15px;
  width: 60%;
  height: 120px;
  margin-left: 10%;
  margin-bottom: 10px;
}
.card_left {
}
.card_middle {
  font-size: 16px;
}
.card_right {
  font-size: 16px;
}
.left_top {
  height: 33%;
  margin-bottom: 8px;
}
.job_name :hover {
  color: #34b8ca;
}
.left_middle {
  margin-bottom: 20px;
}
.banner {
  width: 30%;
}
.banner_img1 {
  width: 300px;
  margin-top: 20px;
  position: absolute;
  right: 110px;
}
.banner_img2 {
  width: 300px;
  margin-top: 220px;
  position: absolute;
  right: 110px;
}
.banner_img3 {
  width: 300px;
  margin-top: 420px;
  position: absolute;
  right: 110px;
}
.block {
  margin-top: 40px;
  position: absolute;
  top: 970px;
  right: 550px;
}
</style>
